import {Link, Form,useActionData} from 'react-router-dom'

export default function Login() {
    const errors = useActionData(); //form表单校验
    return (
        <div className="container page">
            <div className="Row">
                <div className="col-md-6 col-xs-12 offset-md-3">
                    <h1>登录</h1>
                    <Form method="post">
                        <fieldset className="form-group">
                            <input
                                className="form-control form-control-lg"
                                type="text"
                                placeholder="用户邮箱"
                                name="email"
                            />{errors?.email &&<span style={{color: "red"}}>{errors.email}</span>}
                        </fieldset>
                        <fieldset className="form-group">
                            <input
                                className="form-control form-control-lg"
                                type="text"
                                placeholder="用户密码"
                                name="password"
                            />{errors?.password &&<span style={{color: "red"}}>{errors.password}</span>}
                        </fieldset>
                        <button className="btn btn-lg btn-primary pull-xs-right" type="submit">登录</button>
                    </Form>
                    <p className="text-xs-center">
                        <Link to="/regist">还没有账号？去注册</Link>
                    </p>
                </div>
            </div>
        </div>
    )
}